<template>
  <transition name="fade"
    ><dl ref="menuRef" v-show="modelValue" class="dynamic-menu">
      <template v-if="!isNoself"
        ><dt v-if="isDelete" @click="openConfirm(0)">
          <SvgIcon icon-class="delete" popper-class="dynamic-menu__icon" />
          <span>删除</span>
        </dt>
        <dt @click="openConfirm(1)" v-else>
          <SvgIcon icon-class="noshow" popper-class="dynamic-menu__icon" />
          <span>不显示</span>
        </dt></template
      >
      <dt @click="thumb" :class="{ 'dynamic-menu__love': isThumb }">
        <SvgIcon v-show="!isThumb" icon-class="love" popper-class="dynamic-menu__icon" />
        <SvgIcon v-show="isThumb" icon-class="noLove" popper-class="dynamic-menu__icon" />
        <span>{{ isThumb ? "取消点赞" : "点赞" }}</span>
      </dt>
      <dt @click="openEditInp">
        <SvgIcon icon-class="comment" popper-class="dynamic-menu__icon" />
        <span>评论</span>
      </dt>
    </dl></transition
  >
  <template v-if="isMounted">
    <confirm-dialog
      to="#dynamic"
      v-model="showConfirm"
      width="60%"
      :title="titleText"
      :isLoading="isLoading"
      @confirm="confirm"
      ><p>{{ confirmText }}</p></confirm-dialog
    >
    <edit-comment
      v-model="showComment"
      title="评论"
      :dynamic-id="dynamicId"
      :commenter="{
        userId: user.userId,
        remark: user.nickName,
      }"
      @comment="comment"
    ></edit-comment>
  </template>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, inject } from "vue";
import confirmDialog from "@/components/confirmDialog.vue";
import { useDynamicPinia } from "@/pinia/dynamic";
import { useUserPinia } from "@/pinia/user";
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import editComment from "./editComment.vue";

const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    dynamicId: string;
    isDelete?: boolean;
    isNoself: boolean;
    isThumb: boolean;
  }>(),
  {
    isDelete: false,
  }
);

const emits = defineEmits<{
  (e: "update:modelValue", show: boolean): void;
  (e: "thumb", payload: { dynamicId: string; userId: string; remark: string }): void;
  (
    e: "comment",
    payload: {
      info: DynamicCommenter & { commentContent: string };
      commentId: string;
      dynamicId: string;
    }
  ): void;
}>();

const dynamicStore = useDynamicPinia();
const { user } = storeToRefs(useUserPinia());

/**
 * 给操作菜单一个ref属性
 */
const menuRef = ref<any>();
/**
 * 判断用户所点击的元素是否符合标准
 */
const judgeClick_dynamic = (e: Event) => {
  const target: HTMLElement = e.target as HTMLElement;
  if (
    !menuRef.value?.contains(target) &&
    typeof target.className === "string" &&
    !target.className.includes("dynamic-opea")
  )
    emits("update:modelValue", false);
};

watch(
  () => props.modelValue,
  (newValue) => {
    if (newValue) document.addEventListener("click", judgeClick_dynamic);
    else document.removeEventListener("click", judgeClick_dynamic);
  }
);

/**
 * 是否正在发送请求
 */
const isLoading = ref<boolean>(false);
/**
 * 是否显示确认框
 */
const showConfirm = ref<boolean>(false);
/**
 * 确认框文本
 */
const confirmText = ref<string>("");
/**
 * 确认框标题文本
 */
const titleText = ref<string>("");
/**
 * 用户是不显示该条动态还是删除该动态，0代表删除，1代表不显示
 */
const opeaType = ref<0 | 1>(0);
// 打开确认框
const openConfirm = (type: 0 | 1) => {
  emits("update:modelValue", false);
  opeaType.value = type;
  showConfirm.value = true;
  if (type === 0) {
    confirmText.value = "确定删除该条动态（自己和好友都不可见）？";
    titleText.value = "删除动态";
  } else {
    confirmText.value = "确定不显示该条动态（好友仍可见）";
    titleText.value = "不显示动态";
  }
};
// 准备发送请求
const confirm = () => {
  isLoading.value = true;
  dynamicStore
    .opearDynamic({
      dynamicId: props.dynamicId,
      type: opeaType.value,
    })
    .then((code: number) => {
      isLoading.value = false;
      if (code === 1) showConfirm.value = false;
      else
        ElMessage({
          type: "error",
          duration: 1500,
          message: "操作失败",
        });
    })
    .catch(() => {
      isLoading.value = false;
      ElMessage({
        type: "error",
        duration: 1500,
        message: "操作失败",
      });
    });
};

const isLoadingThumb = inject("isLoadingThumb") as any;
// 对动态点赞
const thumb = () => {
  emits("update:modelValue", false);
  isLoadingThumb.value = true;
  dynamicStore
    .thumbDynamic(
      { dynamicId: props.dynamicId },
      {
        remark: user.value.nickName,
        selfId: user.value.userId,
      }
    )
    .then((code: number) => {
      isLoadingThumb.value = false;
      if (code === 1)
        emits("thumb", {
          dynamicId: props.dynamicId,
          remark: user.value.nickName,
          userId: user.value.userId,
        });
      else
        ElMessage({
          type: "error",
          duration: 1500,
          message: "操作失败",
        });
    })
    .catch(() => {
      isLoadingThumb.value = false;
      ElMessage({
        type: "error",
        duration: 1500,
        message: "操作失败",
      });
    });
};

/**
 * 是否显示评论编辑组件
 */
const showComment = ref<boolean>(false);
// 打开评论编辑组件
const openEditInp = () => {
  emits("update:modelValue", false);
  showComment.value = true;
};

/**
 * 当该用户是在好友动态里面评论时添加评论
 */
const comment = (payload: {
  info: DynamicCommenter & { commentContent: string };
  commentId: string;
  dynamicId: string;
}) => emits("comment", payload);

/**
 * 是否开始挂载资料卡片组件
 */
const isMounted = ref<boolean>(false);
onMounted(() => (isMounted.value = true));
</script>

<style lang="scss" scoped>
.fade {
  @include fade(0.15s, ease);
}

.dynamic-menu {
  @include opearMenu(1001, 13px);

  & > dt {
    padding-right: 25px;
    padding-left: 15px;
  }

  &__love {
    color: $thumbColor;

    .dynamic-menu__icon {
      color: $thumbColor;
    }
  }

  &__icon {
    margin-right: 3px;
    color: #2d3944;
  }
}
</style>
